<style>
  .select_box {
    position: relative;
    font-size: 14px;
    text-align: left;
    background: #FFFFFF;
    border-radius: 0px;
  }
  .select_box > ul {
    width: 100%;
    position: absolute;
    border-radius: 0px;
    left: 0;
    top: 38px;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    overflow: hidden;
    display: none;
    background: #eee;
    z-index: 99999;
  }
  .select_box > ul > li {
    display:block;
    height:30px;
    padding-left:10px;
    background:#FFFFFF;
    overflow:hidden;
    line-height:30px;
    width:100%;
    font-size: 15px;
    cursor:pointer;
    color: #93412C;
  }
  .select_box > ul .disabled {
    color: #ccc;
  }
  #time {
    color: #93412C;
    padding-left: 8px;
    display: block;
    font-size: 16px;
    line-height: 0px;
    width: 100%;
    height: 38px;
    overflow: hidden;
    border: 1px #eee solid;
    border-radius: 0px;
    background: url(https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/bottom/mobile/arrow-bottom.png) no-repeat right 10px center;
    background-size: 10px;
  }
  .appointment {
    border: none;
    margin-top:60px;
    height:40px;
    font-size:16px;
    background: #93412C;
    color:#FFFFFF;
    border-radius: 5px;
    width:50%;
  }
</style>
<section class="common-enroll">
  <div class="enroll-container">
    <div style="width:100%;display: flex;justify-content: center;align-items: center;position: relative;">
      <span id="appointment-title" style="font-size: 20px;font-weight: bold;
    color: #93412C;">预约报名</span>
      <img class="enroll-close" style="width: 25px;height: 25px;position: absolute; top: -10px;right: 15px" src="https://res.bestyoujia.com/web/UJGC/common/mobile/img/bottom_close.png" />
    </div>
    <div style="display: flex;width: 100%;align-items: center;padding: 25px 20px 0">
      <div style="flex: .35">您的姓名：</div>
      <div style="flex: .8"><input id="username" type="text" placeholder="请填写您的姓名（可不填）" style="border: 1px #eee solid;
    border-radius: 0px;
    background: #FFFFFF;
    width: 100%;
     padding-left: 8px;line-height: 35px"></div>
    </div>
    <div style="display: flex;width: 100%;align-items: center;padding: 25px 20px 0">
      <div style="flex: .35">手机号码：</div>
      <div style="flex: .8"><input id="mobile" type="text" placeholder="请填写您的手机号码   " style="border: 1px #eee solid;
    border-radius: 0px;
    background: #FFFFFF;
    width: 100%;
     padding-left: 8px;line-height: 35px"></div>
    </div>
    <div style="display: flex;width: 100%;align-items: center;padding: 25px 20px 0">
      <div style="flex: .35">致电时间：</div>
      <div style="flex: .8">
        <div class="select_box">
          <input id="time" type="text" value="立即联系（半小时内）" readonly="readonly">
          <ul class="select_ul">
            <li id="time-now">立即联系（半小时内）</li>
            <li id="time-morning">上午（09:00-12:00）</li>
            <li id="time-noon">中午（12:00-14:00）</li>
            <li id="time-afternoon">下午（14:00-18:00）</li>
            <li id="time-evening">晚上（18:00-20:00）</li>
          </ul>
        </div>
      </div>
    </div>
    <button class="appointment">立即预约</button>
    <span style="color: #1c2857;font-size: 12px;margin-bottom: 5px;margin-top: 20px;">*为了您的权益，您的隐私将被严格保密</span>
  </div>
</section>
<script>
    const date = new Date();

    if (date.getHours() >= 12 ){
        $('#time-morning').attr("class", "disabled");
    }
    if(date.getHours() >= 14){
        $('#time-morning').attr("class", "disabled");
        $('#time-noon').attr("class", "disabled");
    }
    if(date.getHours() >= 18){
        $('#time-morning').attr("class", "disabled");
        $('#time-noon').attr("class", "disabled");
        $('#time-afternoon').attr("class", "disabled");
    }

    $(".select_box input").click(function(){
        var thisInput = $(this);
        var thisUl = $(this).parent().find("ul");
        $('.select_ul').slideUp("fast");
        if(thisUl.css("display") == "none"){
            if(thisUl.height()>200){
                thisUl.css({height:"200"+"px","overflow-y":"scroll" })
            }
            thisUl.slideDown("100");
            thisUl.hover(function(){},function(){thisUl.fadeOut("100");});
            thisUl.find("li").click(function(){
                if ($(this).attr("class").indexOf("disabled") >= 0){
                    return false;
                }
                thisInput.val($(this).text());
                thisUl.slideUp("100");
            }).hover(function(){$(this).addClass("hover");
            },function(){$(this).removeClass("hover");});
        }else{
            thisUl.slideUp("fast");
        }
    });

    $('.common-enroll').on('click',  function(event) {
        if (event.target == this){
            hideAppointmentLayer();
        }
    });

    $('.enroll-close').on('click',  function(event) {
        hideAppointmentLayer();
    });

    function showAppointmentLayer(){
        $('.common-enroll').fadeIn();
        $('.common-enroll').css({"display": "flex"});
        $("body,html").css({"overflow": "auto"});
    }

    function hideAppointmentLayer(){
        $('.common-enroll').fadeOut();
        $('#appointment-title').text('预约报名');
        $("body,html").css({"overflow":"auto"});
    }

    // 1通过，2格式不正确，3未输入
    function validMobile(number){
        var isMob =  /^1\d{10}$/;
        if (number == "") {
            return 3;
        }
        return isMob.test(number) ? 1 : 2;
    }

    $.toast.prototype.defaults.duration = 1000;
    $('.appointment').on('click', function () {
        const mobile = $('#mobile').val();
        const mobileStatus = validMobile(mobile);
        switch (mobileStatus) {
            case 1:
                $.showLoading("预约中");

                // doSubmitAppointment(mobile, $('#username').val(), "致电时间:"+$('#time').val(),function(data){
                //     console.log(data);
                //     $.hideLoading();
                //     $.toast("预约成功");
                //     hideAppointmentLayer();
                // },function(xhr){
                //     console.log(xhr);
                //     $.hideLoading();
                //     $.toast("预约失败", "cancel");
                //     hideAppointmentLayer();
                // });

                const data = { mobile, customer: $('#username').val(), remark: "致电时间:"+$('#time').val() };

                doAppointment(data,
                    function(res) {
                        $.hideLoading();
                        $.toast("预约成功");
                        $('#username').val('');
                        $('#mobile').val('');
                        hideAppointmentLayer();
                        console.log('onAppointmentSuccess', res);
                        const { data = '' } = res;
                        if(data) {
                            buryingPoint('APPOINTMENT', data);
                        }
                    }, function(err) {
                        console.log('onAppointmentError', err);
                        $.hideLoading();
                        $.toast(err, "text");
                        hideAppointmentLayer();
                    });

                break;
            case 2:
                $.toast("手机号码格式不正确", "forbidden");
                break;
            case 3:
                $.toast("请输入手机号码", "forbidden");
                break;
        }
    });
</script>
